{include file="public/header,public/nav,public/fixbar" title="练习报告-<?php echo request()->pc_info['seo_title']?>"/}
<div class="practice-header">
    <div class="layui-container" style="padding: 0 15px;">
        <div class="space-between">
            <a href="/question/chapter_detail?id={$info.lib_id}" class="align-items-center layui-font-16"><i class="layui-icon layui-icon-left margin-right-5"></i>返回</a>
            <h3 class="justify-content-center"><img src="/static/images/rank/title_decorate_icon.png"><span class="practice-header-title">{$info.chapter_name}-练习报告</span><img src="/static/images/rank/title_decorate_icon.png"></h3>
            <p></p>
        </div>
        
    </div>
</div>
<div class="layui-body padding-top-130">
    <div class="layui-container">
        <div class="layui-main min-height-80vh">
            <div class="layui-padding-4">
                <div class="layui-row">
                    <div class="layui-panel cover-content-item" style="box-shadow: 0 5px 15px rgba(0, 179, 138, .1);">
                        <div class="layui-col-space20 align-items-center">
                            <div class="layui-col-xs12 layui-col-sm12 layui-col-md6">
                                <div id="echarts-grade" style="height:200px;"></div>
                            </div>
                            <div class="layui-col-xs12 layui-col-sm12 layui-col-md6 padding-right-30">
                                <div class="infor-item space-between layui-font-16">
                                    <span class="text">正确率： </span>
                                    <b class="layui-font-success layui-font-30">{$info.correct_rate ?? 0}%</b>
                                </div>
                                <div class="infor-item space-between layui-font-16">
                                    <span class="text">用时：</span>
                                    <b class="letter-spacing-1">{$info.show_time ?? '--'}</b>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="answer-card" style="padding: 0;margin-top: 80px;">
                        <div class="answer-card-stats space-between">
                            <div class="layui-font-20 font-weight-bold">答题卡</div>
                            <div class="status-legend">
                                <div class="status-item">
                                    <div class="status-color answered-color"></div>
                                    <span>答对</span>
                                </div>
                                <div class="status-item">
                                    <div class="status-color wrong-color"></div>
                                    <span>答错</span>
                                </div>
                                <div class="status-item">
                                    <div class="status-color unanswered-color"></div>
                                    <span>未答</span>
                                </div>
                            </div>
                        </div>
                        <div style="display: flex;justify-content: center;">
                            <div class="question-items" style="display: flex;flex-wrap: wrap;gap: 25px;margin: 40px auto 40px;">
                                {foreach $info.question_list as $key => $v}
                                    <a href="/question/chapter_practice?source=report&product_id={$info.lib_id}&chapter_id={$info.target_id}&practice_id={$info.id}&question_index={$key}">
                                        <div class="question-item {if $v.is_correct == 1}answered{elseif $v.is_correct == 0}wrong{/if}" data-question-id="{$v.question_id}">{$key+1}</div>
                                    </a>
                                {/foreach}
                            </div>
                        </div>
                    </div>
                    <hr>
                    <div class="margin-top-30 text-align-center">
                        <a href="/question/chapter_practice?source=report_wrong&product_id={$info.lib_id}&chapter_id={$info.target_id}&practice_id={$info.id}&question_index=0" class="layui-btn layui-bg-red layui-btn-lg width-150">错题解析</a>
                        <a href="/question/chapter_practice?source=report&product_id={$info.lib_id}&chapter_id={$info.target_id}&practice_id={$info.id}&question_index=0" class="layui-btn layui-bg-success layui-btn-lg width-150">全部解析</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    layui.use(['layer','echarts'], function(){
        var layer = layui.layer, $ = layui.$, echarts = layui.echarts;

        let total_question = "{$info.total_question}"; // 总题数
        let success_count = "{$info.success_count}"; // 答对数
        let show_time = "{$info.show_time}"; // 用时
        
        var echarts_option = echarts.init(document.getElementById('echarts-grade'), 'walden');
        var option = {
            series: [{
                name: "Indicator",
                type: "gauge",
                radius: '100%',
                startAngle: 90,
                endAngle: -270,
                min: 0,
                max: total_question,
                axisLine: {
                    lineStyle: {
                        width: 30,
                        color: [[1, '#f7f7f7']]
                    }
                },
                progress: {
                    show: true,
                    width: 30,
                    itemStyle: {
                        color: '#16b777'
                    }
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    show: false,
                },
                splitLine: {
                    show: false,
                },
                pointer: {
                    show: false,
                },
                detail: {
                    offsetCenter: [0, '-12%'],
                    fontSize: 32,
                    fontWeight: 'bold',
                    formatter: function (params) {
                        return '{value|' + success_count + '}' + 
                       '{divider|/}' + 
                       '{total|' + total_question + '}';
                    },
                    rich: {
                        value: {
                            color: '#16b777',
                            fontSize: 40,
                            fontWeight: 'bold'
                        },
                        divider: {
                            color: '#666666',
                            fontSize: 26,
                            padding: [0, 4, 0, 4]
                        },
                        total: {
                            color: '#60656b',  // 为total_question设置不同的颜色
                            fontSize: 30,
                            fontWeight: 'bold'
                        }
                    },
                    color: '#16b777'
                },
                data: [
                    {value: success_count, name: '答对题数'}
                ]
            }]
        };
        echarts_option.setOption(option);
        // echarts 窗口缩放自适应
        window.onresize = function () {
            echarts_option.resize();
        } 
    })
</script>